<template>
  <div class="p2">
    <span>{{ widgetName }}</span>
    <p>姓名：{{ name }}</p>
    <p>性别：{{ sexAlias }}</p>
  </div>
</template>

<script>
export default {
  name: 'Person2',
  props: {
    widgetName: {
      type: String,
    },
    name: {
      type: String,
    },
    sex: {
      type: String,
    },
  },
  computed: {
    sexAlias() {
      return this.sex === 'male' ? '小哥哥' : '小姐姐';
    },
  },
};
</script>

<style scoped>
.p2 {
  background: pink;
  padding: 10px;
}
</style>
